import { Upload, Image } from 'antd';
import ImgCrop from 'antd-img-crop';
import React, { useState } from 'react';

export default () => {

    const [fileList, setFileList] = useState([
        {
            uid: '-1',
            name: 'image.png',
            status: 'done',
            url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
        },
    ]);

    const onChange = ({ fileList: newFileList }) => {
        setFileList(newFileList);
    };

    const onPreview = async (file) => {
    };

    return (
        <ImgCrop rotate>
            <Upload
                action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                listType="picture-card"
                fileList={fileList}
                onChange={onChange}
                onPreview={onPreview}
                itemRender={(_, file) => {
                    return (
                        <Image src={file.url} />
                    )
                }}
            >
                {fileList.length < 1 && '+ Upload'}
            </Upload>
        </ImgCrop>
    )
}